<script setup>
import { ref } from 'vue';
	const props = defineProps(['info'])

	const consultFlags = ['没有就诊过', '就诊过']
	const illnessTimes = {
		1: '一周内',
		2: '一个月内',
		3: '半年内',
		4: '半年以上',
	}
	
	const lookPictures=(img,index)=>{
		console.log(img);
		const imgsUrl=img.map((item)=>item.url)
		uni.previewImage({
			        current:index,
					urls:imgsUrl,  //把图片信息变成一个单独只有url的数组
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
	}
</script>


<template>
	<!-- 患者信息（21） -->
	<view class="patient-info">
		<view class="header">
			<view class="title">{{ info.patientInfo.name }} - {{ info.patientInfo.genderValue }} -
				{{ info.patientInfo.age }}岁
			</view>
			<view class="note">
				{{ illnessTimes[info.patientInfo.illnessTime] }} |
				{{ consultFlags[info.patientInfo.consultFlag] }}
			</view>
		</view>
		<view class="content">
			<view class="list-item">
				<text class="label">病情描述</text>
				<text class="note">{{ info.patientInfo.illnessDesc }}</text>
			</view>
			<view class="list-item">
				<text class="label">图片</text>
				<view v-if="info.pictures.length > 0" class="note" >
				  <image v-for="(item,index) in info.pictures" :key="item.id" :src="item.url" mode="scaleToFill" style="width: 80rpx;height: 80rpx;"
				     @click="lookPictures(info.pictures,index)"  
				  />
				</view>
				<text v-else class="note">暂无图片</text>
			</view>
		</view>
	</view>
</template>

<style lang="scss">
	.patient-info {
		padding: 30rpx;
		margin-top: 60rpx;
		border-radius: 20rpx;
		box-sizing: border-box;
		background-color: #fff;

		.header {
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid #ededed;

			.title {
				font-size: 32rpx;
				color: #121826;
				margin-bottom: 10rpx;
			}

			.note {
				font-size: 26rpx;
				color: #848484;
			}
		}

		.content {
			margin-top: 20rpx;
			font-size: 26rpx;

			.list-item {
				display: flex;
				margin-top: 10rpx;
			}

			.label {
				width: 130rpx;
				color: #3c3e42;
			}

			.note {
				flex: 1;
				line-height: 1.4;
				color: #848484;
			}
		}
	}
</style>